<template>
  <div class="dashboard-container">
    <div class="welcom">
      Hi {{ name }}，欢迎回到海狼电子锁管理平台~
    </div>
    <div v-if=" type === 'guide' ">
      <el-row :gutter="40" class="panel-group">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel" @click="$router.push({ name: 'Smartlock' })">
            <div class="card-panel-icon-wrapper icon-lock">
              <svg-icon icon-class="lock" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">电子锁</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <div class="card-panel" @click="$router.push({ name: 'Key' })">
            <div class="card-panel-icon-wrapper icon-key">
              <svg-icon icon-class="key" class-name="card-panel-icon" />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">蓝牙钥匙</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      lineChartData: {
        Abscissa: ['2018-10-5', '2018-10-6', '2018-10-7', '2018-10-8', '2018-10-9', '2018-10-10', '2018-10-11'],
        expectedData: [200, 192, 120, 144, 160, 130, 140],
        actualData: [180, 160, 151, 106, 145, 150, 130]
      },
      items: [],
      chartItemWidth: '100%',
      chartItemHeight: '250px',
      deviceData: {
        name: '设备统计',
        items: [],
        data: []
      },
      statusData: {
        name: '状态',
        items: [
          '在线',
          '离线'
        ],
        data: [],
        color: ['#409EFF', '#909399']
      },
      powerData: {
        name: '电量',
        items: [
          '低电',
          '正常'
        ],
        data: [],
        color: ['#F56C6C', '#67C23A']
      },
      deviceMap: {
        1: '门锁',
        2: '网关',
        3: '水表',
        4: '电表',
        5: '天然气'
      },
      type: null
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.type = 'guide'
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-container {
    color: #303133;
    padding: 20px;
    min-height: 680px;
    background-color: rgb(240, 242, 245);
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
    .chart-title {
      font-weight: 500;
      padding: 12px 0;
      margin: 0;
      font-size: 14px;
      color: #606266;
    }
    .chart-item {
      display: inline-block;
      width: 49%;
    }
    .welcom {
      padding: 10px;
      font-size: 24px;
    }
    .tip {
      padding: 20px 10px 0;
      color: #409EFF;
    }
    .panel-group {
      margin-top: 18px;
      .card-panel-col{
        margin-bottom: 32px;
      }
      .card-panel {
        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
        border-color: rgba(0, 0, 0, .05);
        &:hover {
          .card-panel-icon-wrapper {
            color: #fff;
          }
          .icon-lock {
            background: #40c9c6;
          }
          .icon-key {
            background: #36a3f7;
          }
        }
        .icon-lock {
          color: #40c9c6;
        }
        .icon-key {
          color: #36a3f7;
        }
        .card-panel-icon-wrapper {
          float: left;
          margin: 14px 0 0 14px;
          padding: 16px;
          transition: all 0.38s ease-out;
          border-radius: 6px;
        }
        .card-panel-icon {
          float: left;
          font-size: 48px;
        }
        .card-panel-description {
          float: right;
          font-weight: bold;
          margin: 26px;
          margin-left: 0px;
          .card-panel-text {
            line-height: 18px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 16px;
            margin-bottom: 12px;
          }
        }
      }
    }
  }
</style>
